<template>
    <el-row>
        <el-col :span="24">
            <el-carousel height="600px">
                <el-carousel-item v-for="(item, index) in categorys" :key="index">
                <div class="image carousel" :style="{backgroundImage: 'url(src/images/'+item.name+'.jpg)'}"></div>
                    <!-- <img :src="item.src" class="image" alt="" /> -->
                </el-carousel-item>
            </el-carousel>
        </el-col>
    </el-row>
    <el-row>
        <el-col v-for="(category, index) in categorys" :span="4" :offset="index > 0 ? 1 : 0">
            <el-card :body-style="{ padding: '0px' }" >
                <img
          :src="`src/images/${category.name}.jpg`"
          class="image"
        />
                <div style="padding: 14px">
                    <span>{{ category.name }}</span>
                    <div class="bottom">
                        <!-- <time class="time">{{ currentDate }}</time> -->
                        <el-button type="text" class="button" @click="redirect(category.categoryId)">Browse
                        </el-button>
                    </div>
                </div>
            </el-card>
            <!-- <el-table :data="categorys" stripe style="width: 100%">
                <el-table-column prop="categoryId" label="Catid" width="180" />
                <el-table-column label="Name" width="180">
                    <template #default="scope">
                        <el-button round @click="redirect(scope.row.categoryId)">{{ scope.row.name }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table> -->
        </el-col>
    </el-row>
</template>

<script>
import { ref } from '@vue/reactivity'
import axios from 'axios';
import { onMounted } from '@vue/runtime-core';
import router from '../router';
import { reactive } from 'vue';
var username = sessionStorage.getItem("username");
export default {
    name: "home",
    data() {
        return {
            categories: [
                // { url: require("src/images/Dalmation.jpg") },
                { src: new URL('../images/birds.jpg', import.meta.url).href },
                { src: new URL('../images/Cats.jpg', import.meta.url).href },
                { src: new URL('../images/Dogs.jpg', import.meta.url).href },
                { src: new URL('../images/fish.jpg', import.meta.url).href },
                { src: new URL('../images/REPTILES.jpg', import.meta.url).href },
            ]
        };
    },
    setup() {
        const categorys = ref([])
        const getCategory = () => {
            return axios.get("/category/categories").then(res => {
                // return axios.get("/category/categories/"+localStorage.getItem("token")).then(res => {
                return res;
            }).catch(e => {
                return e.res.data;
            })
        }
        const haha = reactive({
            action: "View AllCategory"
        })
        // const addLog=(username,action)=>
        // {
        //     return axios.post("/account/"+username+"/logg/"+action).catch(e => {
        //         console.log(e.res.data) ;
        //     })
        // }
        const redirect = (catid) => {
            console.log("/product/" + catid);
            router.push({ path: "/product/" + catid });
        }
        onMounted(async () => {
            // await addLog(username,haha.action);
            const resdata = await getCategory();
            console.log(resdata);
            categorys.value = resdata.data.data;
        })
        return {
            categorys,
            redirect
        }
    }
};
</script>

<style>

/* .el-card {
    margin: 20px;
} */
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.carousel {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: content-box;
    background-size: cover;
}
</style>